<template>
    <!--头部-->
    <div class="column-detail">
        <div id="mescroll" class="mescroll"  v-mescroll="{up:'upCallback',size:page.num,num:page.size}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <div class="info-banner">
                        <z-history></z-history>
                        <img class="image" :src="columnlist.newposter">
                        <div class="select">
                            <div class="detail-title" :class="{'active':tab*1===1}" @click="btn(1)">详情</div>
                            <div class="detail-title" :class="{'active':tab*1===2}" @click="btn(2)">目录</div>
                        </div>
                        <div class="detail-content" v-if="tab*1===1">
                            <div class="pad marginb1 marginb2">
                                <p class="title">{{columnlist.name}}
                                    <span v-if="columnlist.priceWay == '2'" class="mark-outline markbottom">
                                <span class="mark-inner ticketcolor font1">积分抵现</span>
                            </span>
                                    <span v-if="columnlist.priceWay == '3'" class="mark-outline markbottom">
                                <span class="mark-inner ticketcolor font1">折扣优惠</span>
                            </span>
                                    <span v-if="columnlist.priceWay == '6' || columnlist.priceWay == '5'" class="mark-outline markbottom">
                                <span class="mark-inner ticketcolor font1">会员专享</span>
                            </span>
                                    <span v-if="columnlist.priceWay == '7'" class="mark-outline markbottom">
                                <span class="mark-inner ticketcolor font1">会员折扣</span>
                            </span>
                                </p>
                                <p class="detaila marginb1" v-if="columnlist.slogan">{{columnlist.slogan}}</p>
                                <p class="detaila">
                                    <span>已有{{columnlist.singleNum}}期({{columnlist.stopUpdate?'已完结':'持续更新…'}})</span>
                                    <span>&nbsp;&nbsp;{{columnlist.orderNum}}人订阅</span>
                                </p>
                            </div>
                            <div class="gray-line"></div>
                            <!-- 已购买显示查看详情 -->
                            <!--<div v-if="getBought">
                                <div class="block pad checkdes">
                                    <router-link :to="{name:'columnDetail',params:{id:columnlist.id}}" replace>
                                        <p class="info-check">查看详情
                                            <i class="iconfont icon-fanhui"></i>
                                        </p>
                                    </router-link>
                                </div>
                                <div class="gray-line"></div>
                            </div>-->

                            <!-- 未购买时显示详情页 -->
                            <div style="height:auto" v-bind:class="{'marginb':trylistLength == 0, 'marginb':freeread == null}">
                                <div class="desc-title"><span class="title-desc">付费读介绍</span></div>
                                <div class="pad">
                                    <div class="html-content" v-html="columnlist.desc">

                                    </div>
                                </div>
                                <div class="gray-line" v-if="columnlist.desc"></div>
                            </div>

                        </div>
                        <div class="detail-menu" v-if="tab*1===2">
                            <!--未购买时免费试读-->
                            <div class="pad info-review-block freelist">
                                <div class="info-review" v-if="trylistLength">
                                    <router-link :to="{name:'single',params:{id:tryRead.id,type:1}}" class="item" replace>
                                        <div class="left-num">1</div>
                                        <p class="titlea">【
                                            <span v-if="tryRead.type == '1'" class="">试读</span>
                                            <span v-if="tryRead.type == '2'" class="">试听</span>
                                            <span v-if="tryRead.type == '3'" class="">试看</span>
                                            <span v-if="tryRead.type == '4'" class="">试看</span>】
                                            {{tryRead.name}}
                                        </p>
                                        <p class="des" v-if="tryRead.createTime">
                                            <i class="iconfont icon-yinpin" v-if="tryRead.type*1===2"></i>
                                            <i class="iconfont icon-shipinicon" v-if="tryRead.type*1===3"></i>
                                            <i class="iconfont icon-tuwen" v-if="tryRead.type*1===1"></i>
                                            {{tryRead.createTime | stampFormate}}
                                            &nbsp;&nbsp;{{tryRead.subscriptionNum}}次收听
                                            <i class="iconfont icon-shipinx" v-if="tryRead.type == '4' || tryRead.type=='3'"></i>
                                            <i class="iconfont icon-yinpinx" v-if="tryRead.type == '2'"></i>
                                        </p>
                                    </router-link>
                                </div>
                                <!-- 已购买列表 -->
                                <div class="info-review" v-if="!getBought">
                                    <router-link :to="{name:'single',params:{id:item.id,type:2}}" v-for="item,index in singeLists" :key="item.id" replace>
                                        <div class="left-num" v-if="tryRead.id">{{index+2}}</div>
                                        <div class="left-num" v-else>{{index+1}}</div>
                                        <p class="titlea">{{item.name}}</p>
                                        <p class="des" v-if="item.createTime">
                                            <i class="iconfont icon-yinpin" v-if="item.type*1===2"></i>
                                            <i class="iconfont icon-shipinicon" v-if="item.type*1===3"></i>
                                            <i class="iconfont icon-tuwen" v-if="item.type*1===1"></i>
                                            {{item.createTime | stampFormate}}
                                            &nbsp;&nbsp;{{item.subscriptionNum}}次收听
                                            <i class="iconfont icon-shipinx" v-if="item.type == '4' || item.type=='3'"></i>
                                            <i class="iconfont icon-yinpinx" v-if="item.type == '2'"></i>
                                        </p>
                                    </router-link>
                                </div>
                                <div class="info-review" v-if="getBought">
                                    <div @click="showTip" v-for="item,index in singeLists" :key="item.id" replace>
                                        <div class="left-num" v-if="tryRead.id">{{index+2}}</div>
                                        <div class="left-num" v-else>{{index+1}}</div>
                                        <p class="titlea">{{item.name}}</p>
                                        <p class="des" v-if="item.createTime">
                                            <i class="iconfont icon-yinpin" v-if="item.type*1===2"></i>
                                            <i class="iconfont icon-shipinicon" v-if="item.type*1===3"></i>
                                            <i class="iconfont icon-tuwen" v-if="item.type*1===1"></i>
                                            {{item.createTime | stampFormate}}
                                            &nbsp;&nbsp;{{item.subscriptionNum}}次收听
                                            <i class="iconfont icon-shipinx" v-if="item.type == '4' || item.type=='3'"></i>
                                            <i class="iconfont icon-yinpinx" v-if="item.type == '2'"></i>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <!--未购买显示支付按钮 有免费试读-->
                        <div v-if="!getBought && trylistLength != 0" class="info-btn">
                            <router-link :to="{name:'single',params:{id:tryRead.id,type:1}}" class="btn btn-ding btn-default">免费试读</router-link>
                            <span class="btn btn-ding btn-blue btn1" v-if="columnlist.price!=0 && columnlist.onSale == true" @click="columnOrder">订阅:￥{{columnlist.price/100}}</span>
                            <span class="btn btn-ding btn-blue btn1" v-if="columnlist.price==0 && columnlist.onSale == true" @click="columnOrder"> 免费获取</span>
                            <span class="btn btn-ding btn-blue stopSale" v-if="columnlist.onSale == false" @click="stopSale()">已下架</span>
                        </div>
                        <!-- 无免费试读 -->
                        <div v-if="!getBought && trylistLength == 0" class="info-btn">
                            <span class="btn btnperfect btn1" v-if="columnlist.price!=0 && columnlist.onSale == true" @click="columnOrder">订阅:￥{{columnlist.price/100}}</span>
                            <span class="btn btnperfect btn1" v-if="columnlist.price==0 && columnlist.onSale == true" @click="columnOrder">免费获取</span>
                            <span class="btn stopSale" v-if="columnlist.onSale == false" @click="stopSale()">已下架</span>
                        </div>
                        <!--<div v-infinite-scroll="upCallback" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                            <div v-if="getBought">
                                <div class="inifinte-text" v-if="!lastPage">正在加载...</div>
                                <div class="inifinte-text" v-if="lastPage">&#45;&#45;END&#45;&#45;</div>
                            </div>
                        </div>-->

                        <!---会员申请弹窗-->
                        <div class="solve delectBox" v-if="solveMsg">
                            <div class="delectBox-top1">{{solveMsg}}</div>
                            <div class="delectBox-btn">
                                <router-link class="yes" :to="{name:'vip'}">确认</router-link>

                                <div class="no" @click="solveCancel()">取消</div>
                            </div>
                        </div>
                        <!--<z-home></z-home>-->
                        <z-modal :msgs= "msg" v-if="showModal"></z-modal>
                    </div>

                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import { columnService } from '../../service/columnService'
    import { commonService } from '../../service/commonService'
    import { appService } from '../../service/appService'
    export default {
        props: ['detailhead'],
        // 添加以下代码
        metaInfo () {
            // console.log(this);
            const title = this.shareData.title || this.columnlist.name
            const desc = this.shareData.desc || '点击查看详情'
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: desc },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联'},
                ]
            }
        },
        data() {
            return {
                tab:1,
                array: [],
                arrayList: [],
                buystate: false,
                singeLists: [],
                getBought: null,
                tryRead: {},
                trylistLength: 0,
                freeread: null,
                myVip:null,
                page:{num:1,size:5},
                busy:true,
                lastPage:false,
                solveMsg:'',
                showModal:false
            }
        },
        asyncData({store,route}) {
            function columnDetail(){
                return  columnService.columnDetail({ id: route.params.colId }).then(function(res) {
                    store.state.homeStore.column = getFormat(res.data.datas)
                })
            }
            function getFormat(array) {
                array.newposter = store.state.picHead + array.poster
                array.newcover = store.state.picHead + array.cover
                return array
            }
            function getshare() {
                let params = {
                    type:30,typeId:route.params.colId
                }
                return appService.getshare(params).then(function(res){
                    // console.log(res.data.datas);
                    store.state.shareData=res.data.datas
                })
            }
            return Promise.all([
                columnDetail(),getshare()
            ])

        },
        computed: {
            //将存在store中的数据取出
            columnlist: {
                // getter
                get: function () {
                    return this.$store.state.homeStore.column || {}
                },
                // setter
                set: function (newValue) {
                    return newValue
                }
            },
            shareData: {
                // getter
                get: function () {
                    return this.$store.state.homeStore.shareData || {}
                },
                // setter
                set: function (newValue) {
                    return newValue
                }
            },
        },
        mounted() {
            const that = this;
            console.log(111);
            that.seviceSingles();
            that.upCallback();
            /*
             * 微信分享设置
             * type查看规则列表写死，
             * text.name为文章标题
             * */
            let share = {
                hasGet:true,
                title:that.shareData.title ||  that.columnlist.name,
                imageUrl: that.shareData.imgUrl,
                brief: that.shareData.desc || '点击查看详情',
                url: that.shareData.dataUrl || window.location.href
            }
            appService.getWxJssdk().then(function () {
                appService.getWxShare(share, that.columnlist.name)
            })

//        判断是否登录
            if(appService.checkLogin()) {
                //判断是否购买
                columnService.getBought({type: '3', id: that.$route.params.colId}).then(function (res) {
                    that.getBought = res.data.datas.result;
                    if (that.getBought == true) {
//                    that.upCallback();
                        that.busy=false
                        // that.seviceSingles();
//                    console.log('购买了', that.getBought)
                    } else if (that.getBought == false) {
//                    console.log('未购买了', that.getBought)
                    }
                    // that.getVip()
                })
            }else{
                that.getBought == false
            }
        },
        methods: {
            getVip:function(){
                const that = this
                commonService.myCenter().then(function(res){
                    if(res.data.datas == null){
                        // 申请vip提示框
                        that.solve('该知识为会员专享，只有成为会员才能购买，确认开通会员吗？')
                    } else if(res.data.datas != null){
                        that.myVip = res.data.datas.user.myVip.vip
                        if(that.myVip == true){
                            that.$router.replace({ name: 'createOrder', params: { type: '1', comNo: that.$route.params.colId } })
                        }else{
                            // 申请vip提示框
                            that.solve('该知识为会员专享，只有成为会员才能购买，确认开通会员吗？')
                        }
                    }
                })
            },
            getFormat:function (array) {
                let that = this
                array.newposter = that.$store.state.picHead + array.poster
                array.newcover = that.$store.state.picHead + array.cover
                return array
            },
            btn: function (v) {
                const that = this;
                that.tab = v
            },
            solve: function (msg) {
                const that = this;
                that.solveMsg = msg
            },
            solveCancel: function (msg) {
                const that = this;
                that.solveMsg = null
            },
            showTip: function (msg) {
                commonService.autoCloseModal(this, '请先购买', 1);
            },
            seviceSingles: function() {
                // 请求免费熟读单品
                const that = this;
                // console.log(222);
                columnService.columnSingles({ singleColumnId: this.$route.params.colId, pageNo: 1, pageSize: 10, type: 2 }).then(function(res) {
                    // console.log(res);
                    that.freeread = res.data.datas.datas;
                    if (res.data.datas.datas != null) {
                        that.trylistLength = res.data.datas.datas.length;
                        if (that.trylistLength != 0) {
                            that.tryRead = that.getFormat(res.data.datas.datas[0]);
                        }
                    }
                    // console.log(that.tryRead);
                })
            },
            // 点击订阅
            columnOrder: function() {
                const that = this
                let login = commonService.getRedirectPath(that)
                if (login == true) {
                    if(that.columnlist.priceWay == 6 || that.columnlist.priceWay == 5){
                        that.getVip()
                    }else{
                        that.$router.replace({ name: 'createOrder', params: { type: '1', comNo: that.$route.params.colId } })
                    }
                } else {
                    that.$router.push({ name: 'login' })
                }
            },
            getFormats: function(array) {
                const that = this;
                for (let i = 0; i < array.length; i++) {
                    array[i].newposter = this.$store.state.picHead + array[i].poster
                    array[i].newcover = this.$store.state.picHead + array[i].cover
                }
                return array
            },
            upCallback: function() {
                // console.log('进入请求列表')
                const that = this;
                columnService.columnSingles({
                    singleColumnId: this.$route.params.colId,
                    type: 1,
                    pageNo: that.page.num,
                    pageSize: that.page.size
                }).then(function(res) {
                    if (res.data.datas.datas != null) {
                        var list = res.data.datas.datas;
                        //加载完成后给页数+1
                        if(that.page.num*1===1){
                            that.singeLists=res.data.datas.datas
                        }else{
                            for(let i in list){
                                that.singeLists.push(list[i])
                            }
                        }
                        that.arrayList = that.getFormats(that.singeLists)
                        that.page.num +=1
                        that.mescroll.endSuccess(list.length);
                    }
                })
            },
            closeModal:function(){
                const that = this;
                setTimeout(function(){
                    that.showModal = false
                },2000)
            },
            pop (mess, typ) {
                let that = this
                that.showModal = true
                if(typ == 1){
                    that.msg = {
                        text: mess,
                        type: 1
                    }
                }
            },
            //专栏下架弹窗
            stopSale:function() {
                let that = this;
                that.pop('该付费读已下架', 1);
                that.closeModal()
            }
        }
    }
</script>

<style lang="less">
    @import url('../../assets/css/media/audioplayer.css');
    @import url("../../assets/css/mescroll.min.css");
    /*@import url('../../assets/css/common/html.css');*/
    /*@import url('../../assets/js/common/mescroll/mescroll.min.css');*/
    // 会员弹框提示样式
    .column-detail{
        .mescroll {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .detail-menu{
            .info-review{
                padding-left: .6rem;
                >a,>div {
                    position:  relative;
                }
            }
            .left-num {
                position: absolute;
                left: -.5rem;
                font-size: 16px;
                color: #999999;
                top: .3rem;
                line-height: .7rem;
            }
        }
        .select{
            font-size: 16px;
            color: #333333;
            line-height:35px;
            background: #FFFFFF;
            box-shadow: inset 0 -1px 0 0 rgba(221,221,221,0.50);
            display:flex;
            .detail-title{
                flex:1;text-align:center;
            }
            .active{
                box-shadow: inset 0 -2px 0 0 #20A0FF;
            }
        }
        .desc-title{
            padding:20px 0 0px 20px;
            .title-desc{
                font-size:16px;
                color:#fff;
                padding: 2px 10px 2px 6px;
                background: #20A0FF;
                position:relative;
            }
            .title-desc:before{
                content: ' ';
                width: 4px;
                height: 4px;
                display: inline-block;
                position: absolute;
                right: 0;
                top: 11px;
                background: #fff;
                border-radius: 50%;
            }
            .title-desc:after{
                content: ' ';
                width: 0;
                height: 0;
                display: inline-block;
                position: absolute;
                right: -16px;
                top: 0;
                border-top: 13px solid #fff;
                border-right: 0;
                border-left: 16px solid #20A0FF;
                border-bottom: 13px solid #fff;
            }
        }

        .btnperfect{
            width:100% !important;
        }
        body{
            overflow: initial;
        }
        .iconfont.icon-shipinx{font-size:14px !important;}
        // .iconfont.icon-yinpinx{font-size:13px !important;}
        .solve{
            position: fixed;
            top: 0;
            left: 0;
            font-size: 16px;
            z-index: 99999;
            .btn{
                width: 100%;
                height: 44px;
                line-height: 44px;
                text-align: center;
                font-size: 17px;
                border-top: 1px solid #eee;
                .solve-cancel{
                    color: #999;
                    display: inline-block;
                    margin-right: 30px;
                }
                .solve-comfirm{
                    color: #0076FF;
                    display: inline-block;
                }
            }
        }
        .delectBox{
            width:6rem;
            height:3rem;
            box-sizing: border-box;
            position: fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
            text-align: center;
            border:1px solid #eee;
            background: #FFFFFF;
            box-shadow: 0 2px 20px 0 rgba(0,0,0,0.12);
            border-radius: 12px;
            z-index:1000;
            .delectBox-top1{
                padding-top: .5rem;
                width: 100%;
                height: 1.3rem;
                line-height: .6rem;
                text-align: center;
                font-size: 14px;
                color: #333333;
            }
            .delectBox-btn{
                width:100%;
                height:1.2rem;
                font-size:14px;
                .yes{
                    width:50%;
                    height:1.2rem;
                    line-height:1.2rem;
                    float:right;
                    color:#007AFF;
                }
                .no{
                    width:calc(50% - 1px);
                    height:1.2rem;
                    line-height:1.2rem;
                    float:right;
                    color:#999;
                }
            }
        }

        /* 头图 */
        .info-banner {
            width: 100%;
            overflow-y: scroll;
            min-height: 100vh;
            .freelist {
                background: #fff;
                margin-bottom: 1.2rem;
            }
            // 已下架按钮
            .stopSale{
                color: #fff !important;
                background: #ccc !important;
            }
            .image {
                width: 100%;
                height: 4.98rem;
            }
            .detaila {
                text-align: left;
                font-size: .38rem;
                color: #999999;
                letter-spacing: 1px;
            }
            .pad {
                background: #fff;
                padding: .4rem .4rem;
                .title {
                    margin-bottom: .25rem;
                    font-size: .588rem;
                    color: #333333;
                    letter-spacing: .0488rem;
                    text-align: left;
                    font-weight: 600;
                }
            }
            .checkdes{
                padding:.4rem .4rem!important;
            }
            .marginb1 {
                margin-bottom: .11rem;
            }
            .marginb2 {
                background: #fff;
                margin-bottom: .11rem !important;
            }
            .marginb {
                margin-bottom: 1.5rem
            }
            // .html-content {
            //     pre {
            //         white-space: pre-wrap;
            //         /*css-3*/
            //         white-space: -moz-pre-wrap;
            //         /*Mozilla,since1999*/
            //         white-space: -pre-wrap;
            //         /*Opera4-6*/
            //         white-space: -o-pre-wrap;
            //         /*Opera7*/
            //         word-wrap: break-word;
            //         /*InternetExplorer5.5+*/
            //     }
            //     img{width: 100%;}
            //     ul{list-style:disc inside;
            //         li{ list-style:disc inside;font-size: 18px;line-height: 32px;}
            //     }
            //     ol{list-style:decimal inside;
            //         li{list-style:decimal inside;font-size: 18px;line-height: 32px;}
            //     }
            //     em{ font-style: oblique;font-size: 18px;line-height: 32px;}
            //     u{font-size: 18px;line-height: 32px;}
            //     strong{font-size: 18px;line-height: 32px;}
            //     s{font-size: 18px;line-height: 32px;}
            //     p{font-size: 18px;line-height: 32px;margin-top: 1em;}
            //     h1{margin-top: 1em;font-size: 24px;}
            //     h2{margin-top: 1em;font-size: 22px;}
            //     h3{margin-top: 1em;font-size: 18px;}
            //     h4{margin-top: 1em;font-size: 16px;}
            //     h5{margin-top: 1em;font-size: 14px;}
            //     h6{margin-top: 1em;font-size: 12px;}
            //     span{font-size: 18px;line-height: 32px;}
            //     .pindent{text-indent: 2em; }
            //     blockquote{padding-left: 10px;border-left: 3px solid #dbdbdb;}
            // }
            .gray-line {
                width: 100%;
                height: 1px;
                background: #F9F9F9; // margin-bottom: .53rem;
            }
            .mark-inner {
                width: 58px;
                height:16px;
                position: relative;
                left: -2px;
                top: -1px;
                font-weight: normal;
                font-size: 12px;
                margin: 0;
                padding: 0 .1rem;
                color: #4EAAFE;
                border: 1px solid #4EAAFE;
                display: inline-block;
                zoom: 1;
                *display: inline;
            }
            .mark-outline {
                width: 70px;
                margin-left: .2rem;
                margin-right: 0;
                border-bottom: 1px solid #4EAAFE;
                display: inline-block;
                zoom: 1;
                *display: inline;
            }
            /* 试读 */
            .info-review-title {
                font-size: .427rem;
                text-align: left;
            }
            .info-review .item {
                border-bottom: 1px solid #eee; // height: 1.827rem;
            }
            .titlea {
                line-height: .7rem;
                font-size: .427rem;
                text-align: left;
                color: #333333;
                padding: .3rem 0;
            }
            .try {
                background: #6699FF;
                color: #fff;
                font-size: .35rem;
                padding: .05rem .15rem;
                margin-left: .1rem;
                word-break: keep-all;
            }
            .des {
                font-size: .32rem;
                text-align: left;
                color: #999999;
                padding-bottom: .35rem;
                border-bottom:1px solid #eee;
                .iconfont{
                    padding-right:.2rem
                }
            }
            .info-review .item:nth-last-child(1) {
                border-bottom: none;
            }
            /* 订阅 */
            .info-btn {
                z-index: 100;
                border: none !important;
                text-align: center;
                line-height: 1.333rem;
                font-size: .427rem;
                width: 100%;
                height: 1.333rem;
                position: fixed;
                padding-bottom:constant(safe-area-inset-bottom);
                left: 0;
                right: 0;
                bottom: 0;
                background: #fff;
                border-top: 1px solid rgba(221, 221, 221, .5);
                padding:0 !important;
            }
            .info-btn .btn {
                display: inline-block;
                text-align: center;
                width: 50%;
                font-weight: 600;
                /*box-shadow: inset 0 0 0 0 rgba(221, 221, 221, 0.50);*/
            }
            .info-btn .btn-default {
                float: left;
            }
            .info-btn .btn-blue {
                float: right;
                color: #fff;
                background: #6699FF;
            }
            .iconfont {
                font-size: .32rem;
            }
            .block {
                // width: 100%;
                // height: 1rem;
                background: #fff;
                margin-bottom: 0.0267rem;
            }
            .info-check {
                font-size: .427rem;
                color: #333;
                text-align: left;
            }
            .info-check .icon-fanhui {
                margin-top: -.01rem;
                float: right;
                color: #ddd;
                font-size: .5rem;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }
        }

    }
</style>